<template>
	<div class="mask" v-show="show">
		<div class="container">
		  <div class="box">
		    <div class="circle"></div>
		    <div class="circle"></div>
		  </div>
		  <h2>加载中...</h2>
		</div>
	</div>
</template>

<script>
	import { reactive, toRefs } from 'vue'
	export default{
		name: 'TBubbleLoad',
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		setup() {
		}
	}
</script>

<style lang="scss" scoped>
	.mask{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, .8);
		
		.container{
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  flex-direction: column;
			
			h2{
			  margin-top: .2rem;
			  font-size: .14rem;
			  font-weight: 400;
			  letter-spacing: .04rem;
			  color: #fff;
			}
			
			.box{
			  position: relative;
			  width: .4rem;
			  height: .4rem;
			  animation: rotatBox 6s linear infinite;
				
				.circle{
				  position: absolute;
				  top:0;
				  left: 0;
				  width: 100%;
				  height: 100%;
				  background: #38c1ff;
				  border-radius: 50%;
				  animation: animate 3s linear infinite;
				}
				
				.circle:nth-child(2){
				  background: #ff3378;
				  animation-delay: -1.5s;
				}
			}
		} 
		@keyframes rotatBox{
		  0%{
		    transform: rotate(0deg)
		  }
		  100%{
		    transform: rotate(360deg)
		  }
		}
		@keyframes animate{
		  0%{
		    transform:scale(1);
		    transform-origin: left;
		  }
		  50%{
		    transform:scale(0);
		    transform-origin: left;
		  }
		  50.01%{
		    transform:scale(0);
		    transform-origin: right;
		  }
		  100%{
		    transform:scale(1);
		    transform-origin: right;
		  }
		}
	}
</style>
